<template>
  <div class="box">
    <div :key="1">
      <h4>Provider Form（defineModel）</h4>
      <provider-form v-model="providerForm" />
      <pre>{{ providerForm }}</pre>
    </div>
    <div :key="2">
      <h4>Product Form（useVModel）</h4>
      <product-form v-model="productForm" />
      <pre>{{ productForm }}</pre>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

const createProductForm = () => ({
  name: 'HUAWEI P40',
  category: 'phone',
  price: 3999,
})

const createProviderForm = () => ({
  name: 'HUAWEI',
  address: 'Beijing',
  memberAmount: 100,
})

export default {
  name: 'ModelPage',
  setup() {
    const productForm = ref(createProductForm())
    const providerForm = ref(createProviderForm())
    return {
      productForm,
      providerForm,
    }
  },
}
</script>

<style scoped lang="scss">
pre {
  text-align: start;
  white-space: pre-wrap;
  margin-left: 200px;
  background-color: antiquewhite;
  border-radius: 4px;
  padding: 12px;
}

.box {
  display: flex;
  gap: 40px;
}
</style>
